<div [formGroup]="fieldForm">
    <div class="form-group row">
        <label class="col-3 col-form-label">{{ "schemas.fieldTypes.dateTime.rangeMin" | sqxTranslate }}</label>
        <div class="col-9"><sqx-date-time-editor enforceTime="true" formControlName="minValue" mode="DateTime" /></div>
    </div>

    <div class="form-group row">
        <label class="col-3 col-form-label">{{ "schemas.fieldTypes.dateTime.rangeMax" | sqxTranslate }}</label>
        <div class="col-9"><sqx-date-time-editor enforceTime="true" formControlName="maxValue" mode="DateTime" /></div>
    </div>

    @if (showDefaultValues | async) {
        <div class="form-group row">
            <label class="col-3 col-form-label">{{ "schemas.fieldTypes.dateTime.defaultMode" | sqxTranslate }}</label>
            <div class="col-3">
                <select class="form-select" formControlName="calculatedDefaultValue">
                    <option></option>

                    @for (value of calculatedDefaultValues; track value) {
                        <option [ngValue]="value">{{ value }}</option>
                    }
                </select>
            </div>
        </div>

        @if (showDefaultValue | async) {
            <div class="form-group row">
                <label class="col-3 col-form-label">{{ "schemas.field.defaultValue" | sqxTranslate }}</label>
                <div class="col-9"><sqx-date-time-editor enforceTime="true" formControlName="defaultValue" mode="DateTime" /></div>
            </div>
        }

        @if (isLocalizable) {
            <div class="form-group row">
                <label class="col-3 col-form-label" for="{{ field.fieldId }}_fieldDefaultValues">
                    {{ "schemas.field.defaultValues" | sqxTranslate }}
                </label>
                <div class="col-9">
                    <sqx-localized-input id="{{ field.fieldId }}_fieldDefaultValues" formControlName="defaultValues" [languages]="languages" type="datetime" />
                    <sqx-form-hint> {{ "schemas.field.defaultValuesHint" | sqxTranslate }} </sqx-form-hint>
                </div>
            </div>
        }
    }
</div>
